<template>
  <div>
    <nav>
      <el-input
        placeholder="请输入您要添加的内容，按回车完成"
        v-model="input"
        @change="getData"
      >
      </el-input>
    </nav>
  </div>
</template>

<script>
// import { v4 as uuidv4 } from "uuid";
import { nanoid } from "nanoid";

export default {
  name: "HeaderBar",
  data() {
    return {
      input: "",
    };
  },
  methods: {
    getData() {
      if (!this.input.trim()) return alert("输入不能为空");
      const todoObj = {
        id: nanoid(),
        name: this.input,
        done: false,
      };
      this.$emit("addData", todoObj);
      this.input = "";
    },
  },
};
</script>

<style scoped>
.inputBox {
  width: 400px;
}
</style>